<template>
    <div>
        <el-row>
            <el-col class="img-col" :span="8" v-for="item in dataList" :key="item.id">
                <el-card :body-style="{ padding: '8px 2px 4px 2px' }">
                    <el-image :src="item.src" class="vol" :preview-src-list="previeList" />
                    <div style="">
                        <div style="min-height: 50px;">
                            <span class="item-title">{{ item.title}}</span>
                        </div>
                        <div class="bottom clearfix">
                            <time class="time" :formatter="formatDate" > {{item.createTime }}</time>
                            <el-button type="text" class="button">上架</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>

        </el-row>
        <div>
            <!--工具条-->
            <el-col :span="24" class="toolbar">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageIndex"
                    :page-sizes="[18, 36, 72]"
                    :page-size="18"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    style="float:right;">
                </el-pagination>
            </el-col>
        </div>
    </div>
</template>

<script>
    import {volList} from '../../api/system/app';
    import {getTime} from '../../api/commonUtil';

    export default {
        name: "vol",
        data() {
            return {
                dataList: [],
                pageIndex: 1,
                title: '',
                type: '',
                pageSize: 18,
                total: 0,
                currentDate: new Date(),
                dataListLoading: false,
                previeList:[],
            };
        },
        mounted() {
            this.getDataList();
        },
        activated() {
            this.getDataList()
        },
        methods: {
            formatDate: function (row, column, cellValue, index) {
                return undefined ===cellValue ? 'null' : getTime(cellValue);
            },
            // 切换pageSize
            handleSizeChange(val) {
                this.pageSize = val;
                this.getDataList();
            },
            // 换页
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.getDataList();
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true
                let params = {
                    'title': this.title,
                    'type': this.type,
                    'currentPage': this.pageIndex,
                    'pageSize': this.pageSize,
                }
                volList(params).then((res) => {
                    if (res != undefined && res.status && res.data !== null && res.data != undefined) {
                        this.total = parseInt(res.data.totalCount)
                        this.pageIndex = parseInt(res.data.currPage)
                        let newList =new Array();
                        for (let x in res.data.list) {
                            let item = res.data.list[x];
                            item.createTime=getTime(item.createTime);
                            newList.push(item);
                            this.previeList.push(item.src);
                        }
                        this.dataList = newList
                    } else {
                        this.dataList = []
                        this.total = 0
                        this.$message({
                            message: '加载失败',
                            type: 'error'
                        });
                    }
                    this.dataListLoading = false
                });

            }
        }
    }
</script>

<style scoped>
    .item-title{
        font-size: 14px;
    }
    .time {
        font-size: 13px;
        color: #999;
    }

    .img-col {
        margin-top: 4px;
        min-height: 280px;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .vol {
        width: 100%;
        min-height: 280px;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
